<template>
  <div class="home">
    <el-container>
      <el-aside width="200px">
          <Sidebar class="sidebar-container" />
      </el-aside>
      <el-main>
          <Head />
          <Content />
      </el-main>
    </el-container>

  </div>
</template>
<script>
import Sidebar from "../common/sidebar/index";
import Head from "../common/sidebar/head";
import Content from "../common/sidebar/content";
export default {
  name: "Home",
  data() {
    return {};
  },
  components: { Sidebar, Head, Content },
};
</script>
<style lang="scss">
.home, .el-container{
    height: 100%;
}
.el-aside{
    background: #d3dce6;
    position: relative;
}
.el-main{
    background: #e5e9f2;padding-top: 0;padding-bottom: 0;
}
.sidebar-container {
  -webkit-transition: width 0.28s;
  transition: width 0.28s;
  width: 100%;
  background-color: rgb(48, 65, 86);
  height: 100%;
  position: absolute;
  font-size: 0px;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
  -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}
</style>

